import { goOrderInfo } from "@/utils/common.js";
window.goOrderInfo = goOrderInfo;
/***
 * 消息弹窗样式
 * @param messageInfo 消息信息
 * @return msgItem
 * (msgItem是html代码，用于消息弹窗的样式)
 * ***/
export function getMessageHtml(messageInfo) {
  let orderStatus = ``;
  let icon = ``;
  let msgItem = ``;
  if (messageInfo.orderStatus === "1") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">待研判</div>`;
  } else if (messageInfo.orderStatus === "2") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">待调度</div>`;
  } else if (messageInfo.orderStatus === "4") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">待处置</div>`;
  } else if (messageInfo.orderStatus === "5") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">待核实</div>`;
  } else if (messageInfo.orderStatus === "6") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">已完结</div>`;
  } else if (messageInfo.orderStatus === "7") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">重复告警</div>`;
  } else if (messageInfo.orderStatus === "0") {
    orderStatus += `<div style="font-size: 12px;font-weight: 400;color: #0DC985;line-height: 12px;margin-top: 3px;">误报</div>`;
  } else {
    orderStatus = ``;
  }
  if (messageInfo.industryFlag === "3") {
    icon += `<i class="iconfont icon-huojingyujing" style="color: #FF4E4F;font-size: 30px;display: flex;justify-content: center;line-height: 84px;"></i>`;
  } else if (messageInfo.industryFlag === "2") {
    icon += `<i class="iconfont icon-huojingyujing" style="color: #FF6600;font-size: 30px;display: flex;justify-content: center;line-height: 84px;"></i>`;
  } else if (messageInfo.industryFlag === "1") {
    icon += `<i class="iconfont icon-huojingyujing" style="color: #FAAC15;font-size: 30px;display: flex;justify-content: center;line-height: 84px;"></i>`;
  } else if (messageInfo.industryFlag === "0") {
    icon += `<i class="iconfont icon-huojingyujing" style="color: #d2ffef;font-size: 30px;display: flex;justify-content: center;line-height: 84px;"></i>`;
  } else {
    icon = ``;
  }
  if (messageInfo.notifyType === "1") {
    //告警通知
    msgItem +=
      `<div id="${messageInfo.msgId}" onclick="goOrderInfo( '` +
      messageInfo.msgId +
      `', '` +
      messageInfo.orderStatus +
      `')" style="width: 384px;height: 86px;background: rgba(3, 34, 69, 0.6);box-shadow: 0px 3px 10px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);border-radius: 10px;border: 1px solid rgba(13, 201, 133, 0.6);backdrop-filter: blur(5px);cursor:pointer">
                  <div style="width: 55px;height: 84px;float: left">
                      <i class="iconfont icon-xiaoxi" style="color: #FAAD14;font-size: 30px;display: flex;justify-content: center;line-height: 84px;"></i>
                      <i class="iconfont icon-a-4x4dian" style="color: red;font-size:30px;position: fixed;top: 22px;left: 25px;"></i>
                  </div>
                  <div style="width: 240px;height: 86px;float: left;margin-top: 20px"">
                     <div style="width: 100%;height: 25px;color: #FF4D4F;font-size: 16px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="${messageInfo.notifyTitle}">
                          ${messageInfo.notifyTitle}
                     </div>
                     <div style="width: 100%;height: 25px;color: #CAF1E2;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="${messageInfo.address}">
                          ${messageInfo.address}
                     </div>
                  </div>
                  <div style="width: 66px;height 86px;float: left;margin-top: 22px">
                     <div style="width: 64px;height: 20px;background: rgba(13, 201, 133, 0.2);border-radius: 10px;border: 1px solid rgba(13, 201, 133, 0.6);text-align: center;" >
                          ` +
      orderStatus +
      `
                     </div>
                  </div>
                </div>`;
  } else {
    msgItem +=
      `<div id="${messageInfo.msgId}" style="width: 384px;height: 86px;background: rgba(3, 34, 69, 0.6);box-shadow: 0px 3px 10px 4px rgba(0, 0, 0, 0.09), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);border-radius: 10px;border: 1px solid rgba(13, 201, 133, 0.6);backdrop-filter: blur(5px);">
                  <div style="width: 55px;height: 84px;float: left">
                      ` +
      icon +
      `
                  </div>
                  <div style="width: 322px;height: 86px;float: left;margin-top: 20px"">
                     <div style="width: 100%;height: 25px;color: #FF4D4F;font-size: 16px;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="${
                       messageInfo.titleInfo.areaName +
                       messageInfo.titleInfo.warningLevel
                     }">
                          ${
                            messageInfo.titleInfo.areaName +
                            messageInfo.titleInfo.warningLevel
                          }
                     </div>
                     <div style="width: 100%;height: 25px;color: #CAF1E2;font-size: 14px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" title="${
                       messageInfo.titleInfo.message
                     }">
                          ${messageInfo.titleInfo.message}
                     </div>
                  </div>
                </div>`;
  }
  return msgItem;
}
